@extends('layouts.admin_common') @section('content')

    @if(app('env')=='production')
        <script src="{{ secure_asset('/js/sy_common.js') }}"></script>
    @else
        <script src="{{ asset('/js/sy_common.js') }}"></script>
    @endif

    <div class="breadcrumbs_container">{{
	Breadcrumbs::render('admin.order') }}</div>
    <div class="system_tab_line"></div>

    <div class="lyx_search_table">
        <form>

            <div class="row">
                <div class="form-group row col-sm-4">
                    <label for="inputPassword"
                           class="col-sm-4 col-form-label">@lang('symessages.info.buy_goods_company')</label>
                    <div class="col-sm-8">
                        <select class="form-control" id="lyx_companys">
                            <option>select</option>
                            @foreach($companys as $com)
                                <option value="{{$com->corp_id}}">{{$com->corp_name}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div class="form-group row col-sm-4">
                    <label for="inputPassword"
                           class="col-sm-4 col-form-label">@lang('symessages.info.post_address')</label>
                    <div class="col-sm-8">
                        <input type="text" class="form-control" id="lyx_p_address">
                    </div>
                </div>
            </div>
            <div class="row">

                <div class="form-group row col-sm-4">
                    <label for="inputPassword"
                           class="col-sm-4 col-form-label">@lang('symessages.info.company_shop')</label>
                    <div class="col-sm-8" id="lyx_shop_master">
                        select company
                    </div>
                </div>

                <div class="form-group row col-sm-4">
                    <label for="inputPassword"
                           class="col-sm-4 col-form-label">@lang('symessages.info.post_address_alias')</label>
                    <div class="col-sm-8">
                        <input type="text" class="form-control" id="lyx_p_address_alias">
                    </div>
                </div>
            </div>

            <div class="row">

                <div class="form-group row col-sm-4">
                    <label for="inputPassword"
                           class="col-sm-4 col-form-label">@lang('symessages.info.postal_code')</label>
                    <div class="col-sm-8">
                        <input type="text" class="form-control" id="lyx_p_postal_code">
                    </div>
                </div>

                <div class="form-group row col-sm-4">
                    <label for="inputPassword"
                           class="col-sm-4 col-form-label">@lang('symessages.info.company_mobile')</label>
                    <div class="col-sm-8">
                        <input type="text" class="form-control" id="lyx_p_mobile">
                    </div>
                </div>

                <div class="form-check form-check-inline col-sm-4">
                    <label for="inputPassword"
                           class="col-sm-4 col-form-label">@lang('symessages.info.company_fax')</label>
                    <div class="col-sm-8">
                        <input type="text" class="form-control" id="lyx_p_fax">
                    </div>
                </div>

            </div>

            <div class="row">

                <div class="form-group row col-sm-4">
                    <label for="inputPassword"
                           class="col-sm-4 col-form-label">@lang('symessages.info.weituo_date')</label>
                    <div class="col-sm-8">
                        <input class="form-control lyx_datetimepicker" type="text" value="" id="lyx_p_weituo_date">
                    </div>
                </div>

                <div class="form-group row col-sm-4">
                    <label for="inputPassword"
                           class="col-sm-4 col-form-label">@lang('symessages.info.post_goods_date')</label>
                    <div class="col-sm-8">
                        <input class="form-control lyx_datetimepicker" type="text" value="" id="lyx_p_goods_date">
                    </div>
                </div>

            </div>

        </form>

        <div class="row">
            <div class="col-sm-3">
                <button class="btn btn-primary button_normal" id="lyx_add_line">添加商品</button>
            </div>
        </div>


        <div class="lyx_table">
            <div class="row lyx_table_title">
                <div class="col-sm-1"></div>
                <div class="col-sm-7">androJapan 在庫一覧</div>
                <div class="col-sm-4">出力日:2018 / 8/31</div>
            </div>
            <div class="row">
                <div class="col-sm-1"></div>
                <div class="col-sm-6">
                    期間:2018 / 4/1 〜 2018/8/31
                </div>
            </div>

            <div class="lyx_alert">

            </div>

            <table class="table table-bordered">
                <thead>
                <tr>
                    <th scope="col">@lang('symessages.info.category')</th>
                    <th scope="col">@lang('symessages.info.product_code')</th>
                    <th scope="col">@lang('symessages.info.product_name')</th>
                    <th scope="col">@lang('symessages.info.store_num')</th>
                    <th scope="col">@lang('symessages.info.price')</th>
                    <th scope="col">@lang('symessages.info.size')</th>
                    <th scope="col">@lang('symessages.info.out_num')</th>
                    <th scope="col">@lang('symessages.info.total_money')</th>
                    <th scope="col">備考</th>
                </tr>
                </thead>
                <tbody id="lyx_tbody">
                <tr>
                    <td>
                        <select class="form-control form-control-sm lyx_cat_select">
                            <option>select category</option>
                            @foreach($category as $cat)
                                <option value="{{$cat->category_id}}">{{$cat->category_name}}</option>
                            @endforeach
                        </select>
                    </td>
                    <td>
                        before select category
                    </td>
                    <td></td>
                    <td></td>
                    <td class="lyx_price"></td>
                    <td class="lyx_size_arr"></td>
                    <td width="100px">
                        <input class="form-control form-control-sm lyx_house_num" type="number" placeholder="">
                    </td>
                    <td class="lyx_total_money"></td>
                    <td>{{$order_id}}</td>
                </tr>

                <tr id="lyx_total_tr">
                    <td colspan="7" style="text-align: center">合計金額</td>
                    <td colspan="2" id="total_sum_money">¥0</td>
                </tr>

                </tbody>
            </table>
            <div class="row">
                <div class="col-sm-8"></div>
                <div class="col-sm-4">
                    <button class="btn btn-primary" id="lyx_post_submit">提交</button>
                </div>
            </div>
        </div>

    </div>


    <script>

        $(function () {
            var postLineData = [];
            var total_sum_money = 0;//总金额
            var order_id = '{{$order_id}}';
            add_select_action();
            select_companys_action();


            $('#lyx_post_submit').on('click', function () {
                postData();
            })

            //-选择分类
            function add_select_action() {
                $(".lyx_cat_select").off().change(function () {
                    var value = $(this).val();
                    var that = $(this).parent('td').next('td');
                    if (value == null || value == '' || value == undefined) {
                        that.html('select category');
                    } else {
                        that.html('loading...');
                        useCatgetGoods($(this).val(), that);
                    }
                });
            }

            /**
             * 选择公司-带出公司下的店铺
             */
            function select_companys_action() {
                $("#lyx_companys").off().change(function () {
                    var value = $(this).val();
                    $.ajax({
                        url: 'get_shop_list',
                        data: {corp_id: value},
                        success: function (retData) {
                            var html1 = '<select class="form-control form-control-sm lyx_shop_select"><option value="">select goods</option>';
                            var html3 = '</select>';
                            var html2 = '';
                            if (retData.data.length > 0) {
                                $.each(retData.data, function (index, item) {
                                    html2 = html2 + '<option value="' + item.shop_id + '">' + item.shop_name + '</option>';
                                })
                                var html_end = html1 + html2 + html3;
                            } else {
                                html_end = 'empty!'
                            }
                            $("#lyx_shop_master").html(html_end);
                            shop_select_action();
                        }
                    })
                });
            }

            /**
             * 选择店铺，显示店铺的基本信息
             */
            function shop_select_action() {
                $(".lyx_shop_select").off().change(function () {
                    var value = $(this).val();
                    getShopInfo(value);
                });
            }

            /**
             * 获取店铺的详情-把存在的信息显示在具体位置
             */
            function getShopInfo(shop_id) {
                $.ajax({
                    url: 'get_shop_info',
                    data: {shop_id: shop_id},
                    success: function (retData) {
                        $('#lyx_p_address').val(retData.data.shop_adress);
                        $('#lyx_p_address_alias').val();
                        $('#lyx_p_fax').val(retData.data.shop_fax_number);
                        $('#lyx_p_goods_date').val();
                        $('#lyx_p_mobile').val(retData.data.shop_tel);
                        $('#lyx_p_postal_code').val();
                        $('#lyx_p_weituo_date').val();
                    }
                })
            }

            //-选择产品
            function add_goods_select_action() {
                $(".lyx_goods_select").off().change(function () {
                    var value = $(this).val();
                    var that = $(this).parent('td').next('td');
                    if (value == null || value == '' || value == undefined) {
                        that.html('select goods');
                    } else {
                        that.html('loading...');
                        getGoodsInfo($(this).val(), that);
                    }
                });
            }

            //--添加数量
            function add_goods_num_action() {
                $(".lyx_house_num").off().change(function () {
                    var thatTr = $(this).parents('tr');
                    var num = $(this).val();
                    var that = thatTr.find('.lyx_total_money');
                    var price = thatTr.find('.lyx_price').data('price');
                    var total_money = num * price;
                    that.html('¥' + total_money);
                    that.data('totalMoney', total_money);
                    addDataToAry(thatTr, num);
                });
            }

            //--添加按钮
            $('#lyx_add_line').on('click', function () {
                addLine();
            })


            /**
             * 添加一条记录
             */
            function addLine() {
                var html = ['<tr>',
                    '                    <td>',
                    '                        <select class="form-control form-control-sm lyx_cat_select">',
                    '                            <option>select category</option>',
                    @foreach($category as $cat)
                        '                                <option value="{{$cat->category_id}}">{{$cat->category_name}}</option>',
                    @endforeach
                        '                        </select>',
                    '                    </td>',
                    '                    <td>',
                    '                        before select category',
                    '                    </td>',
                    '                    <td></td>',
                    '                    <td></td>',
                    '                    <td class="lyx_price"></td>',
                    '                    <td class="lyx_size_arr"></td>',
                    '                    <td width="100px">',
                    '                        <input class="form-control form-control-sm lyx_house_num" type="text" placeholder="">',
                    '                    </td>',
                    '                    <td class="lyx_total_money"></td>',
                    '                    <td>' + order_id + '</td>',
                    '                </tr>'].join("");
                $('#lyx_total_tr').before(html);
                add_select_action();
            }

            /**
             *
             * @param cat_id 产品类别id
             * @param that 操作哪个dom
             */
            function useCatgetGoods(cat_id, that) {
                $.ajax({
                    url: '/admin/use_catget_goods',
                    type: 'post',
                    data: {cat_id: cat_id},
                    success: function (retData) {
                        var html1 = '<select class="form-control form-control-sm lyx_goods_select"><option value="">select goods</option>';
                        var html3 = '</select>';
                        var html2 = '';
                        if (retData.data.length > 0) {
                            $.each(retData.data, function (index, item) {
                                html2 = html2 + '<option value="' + item.goods_id + '">' + item.goods_code + '</option>';
                            })
                            var html_end = html1 + html2 + html3;
                        } else {
                            html_end = 'empty!'
                        }
                        $(that).html(html_end);
                        add_goods_select_action();
                    }
                })
//            lyxAlert('alert-primary', '你好', 3000);
            }


            function getGoodsInfo(goods_id, that) {
                $.ajax({
                    url: '/admin/get_goods_info',
                    type: 'post',
                    data: {goods_id: goods_id},
                    success: function (retData) {
                        var two = that.next();
                        var three = two.next();
                        that.html(retData.data.goods_name);
                        two.html(retData.data.total_num);
                        three.html('¥' + retData.data.price);
                        three.data('price', retData.data.price);
                        getSizeArr(goods_id, that);
                        add_goods_num_action();
                    }
                })
//            lyxAlert('alert-primary', '你好', 3000);
            }

            /**
             * 尺寸数据
             */
            function getSizeArr(id, that) {
                $.ajax({
                    url: '/admin/get_model_info',
                    type: 'post',
                    data: {goods_id: id},
                    success: function (retData) {
                        var theme = that.parents('tr');
                        var html = size_html(retData.data);
                        theme.find('.lyx_size_arr').html(html);
                        theme.data('model_info',retData.data[0]);
                        add_size_action();
                    }
                })
            }

            /**
             * 尺寸的代码片段
             */
            function size_html(data) {
                var html_1 = '<select class="form-control form-control-sm lyx_size_select">';
                var html_2 = ''
                var html_3 = '</select>';
                $.each(data, function (index, item) {
                    html_2 += "<option value='" + JSON.stringify(item) + "'>" + item.color_name+"/"+item.size_name + "</option>";
                })
                return html_1 + html_2 + html_3;
            }

            function add_size_action() {
                $(".lyx_size_select").off().change(function () {
                    var value = $(this).val();
                    value = eval('(' + value + ')');
                    $(this).parents('tr').data('model_info',value);
                    sumToalMoney();
                });
            }

            /**
             * 添加数据到数组里面
             */
            function addDataToAry(that, num) {
                var category_id = that.find('.lyx_cat_select').val();
                var goods_id = that.find('.lyx_goods_select').val();
                var goods_name = that.find('td').eq(2).html();
                var price = that.find('td').eq(4).data('price');
                console.log(category_id, goods_id, goods_name, price);
                var json = {
                    category_id: category_id,
                    goods_id: goods_id,
                    goods_name: goods_name,
                    price: price,
                    goods_num: num,
                    total_money: num * price
                };
                that.data('onedata', json);
                sumToalMoney();
            }

            /**
             * 计算总价，并且把数据放到数据中
             */
            function sumToalMoney() {
                postLineData = [];
                $('tr').each(function () {
                    var j = $(this).data('onedata');
                    if (j != undefined && j != null && j != '') {
                        total_sum_money = total_sum_money + j.total_money;
                        var modelInfo = $(this).data('model_info');
                        j.model_info = modelInfo;
                        postLineData.push(j);
                    }
                })
                $('#total_sum_money').html('¥' + total_sum_money);
            }


            function postData() {
                $address = $('#lyx_p_address').val();
                $alias = $('#lyx_p_address_alias').val();
                $fax = $('#lyx_p_fax').val();
                $goods_date = $('#lyx_p_goods_date').val();
                $mobile = $('#lyx_p_mobile').val();
                $postal = $('#lyx_p_postal_code').val();
                $weituo_date = $('#lyx_p_weituo_date').val();

                $company_id = $('#lyx_companys').val();
                $company_name = $('#lyx_companys').find("option:selected").text();

                $shop_id = $('.lyx_shop_select').val();
                $shop_name = $('.lyx_shop_select').find("option:selected").text();

                console.log($address, $alias, $fax, $goods_date, $mobile, $postal, $weituo_date, postLineData);


                $.ajax({
                    url: 'save_order',
                    type: 'post',
                    data: {
                        order_id: order_id,
                        address: $address,
                        money: total_sum_money,
                        company_id: $company_id,
                        company_name: $company_name,
                        shop_id: $shop_id,
                        shop_name: $shop_name,
                        alias: $alias,
                        fax: $fax,
                        goods_date: $goods_date,
                        mobile: $mobile,
                        postal: $postal,
                        weituo_date: $weituo_date,
                        goods_list: postLineData
                    },
                    success: function (retData) {
                        if (retData.code == 1001) {
                            successAlert();
                        } else {
                            lyxAlert('alert-primary', retData.msg, 3000);
                        }
                    },
                    error: function (retData) {
                        var msg = [];
                        $.each(retData.responseJSON.errors, function (index, item) {
                            msg.push(item[0]);
                        })
                        if (!msg[0]) {
                            msg[0] = retData.responseJSON.message;
                        }
                        lyxAlert('alert-primary', msg[0], 3000);
                    }
                })

            }


        })

    </script>
@endsection

